window.onload = function () {
  var container = document.querySelector("#container");
  var canvas = document.createElement("canvas");
  canvas.width = container.clientWidth;
  canvas.height = container.clientHeight;
  container.appendChild(canvas);

  window.onresize = function () {
    canvas.width = container.clientWidth;
    canvas.height = container.clientHeight;
  };

  const gl = canvas.getContext('webgl');

  const VSHADHER_SOURCE =
      'attribute vec4 a_Position;\n' +
      'attribute vec4 a_Color;\n' +
      'varying vec4 c_Color;\n' +
      'uniform mat4 u_ProjMatrix;\n' +
      'uniform mat4 u_ViewMaterix;\n' +
      'void main(){' +
      '       gl_Position = u_ProjMatrix * u_ViewMaterix * a_Position;\n' +
      '       c_Color = a_Color;\n' +
      '}\n';
  const FSHADER_SOURCE =
      '#ifdef GL_ES\n' +
      'precision mediump float;\n' +
      '#endif\n' +
      'varying vec4 c_Color;\n' +
      'void main(){\n' +
      '   gl_FragColor = c_Color;\n' +
      '}\n';
  const createShader = (type, souce) => {
      const shader = gl.createShader(type);
      gl.shaderSource(shader, souce);
      gl.compileShader(shader);
      const info = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
      if (!info) {
          const err = gl.getShaderInfoLog(shader);
          // alert(err === '');
          gl.deleteShader(shader)
          console.log('编译报错信息为' + err);
          return null;
      }
      return shader;
  }
  const createProgram = (vshader, fshader) => {
      const vertexshader = createShader(gl.VERTEX_SHADER, vshader); //创建顶点着色器
      const fragmentShader = createShader(gl.FRAGMENT_SHADER, fshader); // 创建片着色器
      if (!vertexshader || !fragmentShader) {
          console.log('创建着色器失败');
          gl.deleteShader(fragmentShader);
          gl.deleteShader(vertexshader);
          return null;
      }
      const program = gl.createProgram();
      gl.attachShader(program, vertexshader);
      gl.attachShader(program, fragmentShader);
      gl.linkProgram(program);
      const linkState = gl.getProgramParameter(program, gl.LINK_STATUS);
      if (!linkState) {
          const err = gl.getProgramInfoLog(program);
          console.log('获取链接报错信息', err)
          gl.deleteShader(fragmentShader)
          gl.deleteShader(vertexshader)
          gl.deleteProgram(program);
          return null
      }
      return program;
  }
  const program = createProgram(VSHADHER_SOURCE, FSHADER_SOURCE)
  // console.log(program, 'program')
  gl.useProgram(program)
  gl.program = program;
  var viewMatrix = new Matrix4();
  viewMatrix.setLookAt(0.20, 0.25, 0.25, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0)
  const u_ViewMaterix = gl.getUniformLocation(gl.program, 'u_ViewMaterix');
  // console.log(u_ViewMaterix, 'u_ViewMaterix');
  gl.uniformMatrix4fv(u_ViewMaterix, false, viewMatrix.elements);
  const initBuffers = () => {
      var verticesColors = new Float32Array([
          // Vertex coordinates and color(RGBA)
          0.0, 0.5, -0.4, 0.4, 1.0, 0.4, // The back green one
          -0.5, -0.5, -0.4, 0.4, 1.0, 0.4,
          0.5, -0.5, -0.4, 1.0, 0.4, 0.4,

          0.5, 0.4, -0.2, 1.0, 0.4, 0.4, // The middle yellow one
          -0.5, 0.4, -0.2, 1.0, 1.0, 0.4,
          0.0, -0.6, -0.2, 1.0, 1.0, 0.4,

          0.0, 0.5, 0.0, 0.4, 0.4, 1.0,  // The front blue one 
          -0.5, -0.5, 0.0, 0.4, 0.4, 1.0,
          0.5, -0.5, 0.0, 1.0, 0.4, 0.4,
      ]);
      
      const size = verticesColors.BYTES_PER_ELEMENT;
      const n = 9;
      const vertexColorbuffer = gl.createBuffer();
      const a_Position = gl.getAttribLocation(gl.program, 'a_Position');
      const a_Color = gl.getAttribLocation(gl.program, 'a_Color');
      gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorbuffer);
      gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);
      gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, size * 6, 0);
      gl.enableVertexAttribArray(a_Position);
      gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, size * 6, size * 3)
      gl.enableVertexAttribArray(a_Color);
      // 正射投影矩阵
      const projMatrix = new Matrix4();
      projMatrix.setOrtho(-1.0, 1.0, -1.0, 1.0, 0.0, 20.0)
      const u_ProjMatrix = gl.getUniformLocation(gl.program, 'u_ProjMatrix');
      gl.uniformMatrix4fv(u_ProjMatrix, false, projMatrix.elements);
      gl.clearColor(0.0, 0.0, 0.0, 1.0);
      gl.clear(gl.COLOR_BUFFER_BIT);
      gl.drawArrays(gl.TRIANGLES, 0, n)
      gl.bindBuffer(gl.ARRAY_BUFFER, null);
  }
  initBuffers();
  document.onkeydown = function(e) {
      keydown(e);
  }
  let x = 0.20;
  let y = 0.25;
  const keydown = (e) => {

      if (e.keyCode === 38) {
          // 向上键
          y -= 0.01;
      } else if (e.keyCode === 40) {
          // 向下键
          y += 0.01;
      } else if (e.keyCode === 37) {
          // 左键
          x += 0.01;
      } else if (e.keyCode === 39) {
          // 右键
          x -= 0.01;
      }
      var viewMatrix = new Matrix4();
      viewMatrix.setLookAt(x, y, 0.25, 0, 0, 0, 0, 1, 0);
      gl.uniformMatrix4fv(u_ViewMaterix, false, viewMatrix.elements);
      gl.clear(gl.COLOR_BUFFER_BIT);
      gl.drawArrays(gl.TRIANGLES, 0, 9)
  }
}

